﻿@model IEnumerable<Developer.Entity.Messages>
@{
    Layout = null;
}
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="~/Content/UI/css/mui.min.css" rel="stylesheet" />
    <link href="~/Content/UI/css/mdui.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="~/Content/UI/css/myprofile.css" />
    <link rel="stylesheet" href="~/Assets/Plugs/layer_mobile/need/layer.css" />
</head>

<body>

    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">消息</h1>
    </header>


    <div class="mui-content" style="padding-bottom: 250px;">
        <ul class="mui-table-view mui-card">
            @{ 
                foreach(var item in Model.OrderBy(a => a.IsRead))
                {

                    <li class="mui-table-view-cell mui-collapse @(item.IsRead == true ? "": "mui-active")" id="@item.Id">
                        <a class="mui-navigate-right" href="#">@item.Title</a>

                        <div class="mui-collapse-content">
                            <!-- 卡片的内容 -->
                            <div class="mdui-card-content" style="border-bottom:groove">@item.Contents</div>

                            <!-- 卡片的按钮 -->
                            <div class="mdui-card-actions">
                                <button class="mdui-btn mdui-btn-icon mdui-float-right" onclick="SetReaded(@item.Id);"><i class="mdui-icon material-icons">&#xe5ca;</i>设为已读</button>
                            </div>
                        </div>
                    </li>

                }
            }

        </ul>

    </div>







    <script src="~/Content/UI/js/mui.min.js"></script>
    <script type="text/javascript" src="~/Content/UI/js/mdui.min.js"></script>
    <script src="~/Content/scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript">
        mui.init()

        function SetReaded(mid) {
            $.ajax({
                url: '/Profile/SetMessageReaded',
                dataType: 'Json',
                type: 'POST',
                data: { 'mid': mid },
                success: function (data) {
                    if (data.hasOwnProperty('error')) {
                        console.log(data['error']);
                        mdui.snackbar({
                            message: '出错，请联系管理员'
                        });
                        return;
                    } else {
                        var id = '#' + mid;
                        $(id).removeClass('mui-active');
                    }
                }
            });
        }
    </script>
</body>

</html>